<template>
  <div class="base-table">
    <div class="table-wrapper">
      <el-table
        ref="table"
        :data="tableData"
        :show-overflow-tooltip="tooltioShow"
        :header-cell-style="{ background: '#f8f7fc', color: '#2f2f2f' }"
        :height="height"
        v-loading="loading"
        :show-summary="summary"
        :summary-method="getSummaries"
      >
        <el-table-column
          v-if="showSelection"
          type="selection"
          align="center"
          width="55"
        >
        </el-table-column>
        <el-table-column
          v-if="showSort"
          label="序号"
          align="center"
          type="index"
          width="50"
        ></el-table-column>

        <el-table-column
          show-overflow-tooltip
          v-for="(col, index) in columns"
          :prop="col.prop"
          :key="'bs_' + index"
          :label="col.label"
          :width="col.width"
          :min-width="col.minWidth || '0'"
          :align="col.align || 'center'"
          :fixed="col.fixed"
        >
        </el-table-column>
        <el-table-column
          v-if="operate.show"
          label="操作"
          align="center"
          :width="operate.width || 150"
          fixed="right"
        >
          <template slot="header">
            <slot name="operate-title">
              <span>操作</span>
            </slot>
          </template>
          <template slot-scope="scope">
            <slot name="operate" :current="scope"></slot>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showSelection: {
      type: Boolean,
      default: false
    },
    showSort: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      defaults: []
    },
    columns: {
      type: Array,
      defaults: []
    },
    loading: {
      type: Boolean,
      defaults: false
    },
    operate: {
      type: Object,
      default: () => ({ show: false, width: 150 })
    },
    pages: {
      type: Object,
      default: () => ({ show: false, count: 0, pagesize: 20 })
    },
    summary: {
      type: Boolean,
      default: false
    },
    getSummaries: {
      type: Function
    },
    tooltioShow: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      page: {
        num: 1,
        size: 20
      }
    };
  },
  methods: {},
  watch: {
    pages: {
      deep: true,
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal);
        // if (newVal.pagesize[3] == newVal.pagesize[4]) {
        //   newVal.pagesize.length = 4;
        // }
      }
    }
  }
};
</script>

<style scoped>
.base-table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}
.pagination-wrapper {
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
</style>
<style>
.el-tooltip__popper {
  max-width: 30%;
  padding: 15px;
  padding-bottom: 5px !important;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 15;
  -webkit-box-orient: vertical;
}
.el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
.el-table td.el-table__cell {
  border-bottom: 0px !important;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background: transparent !important;
}
.el-table {
  font-size: 12px !important;
}
</style>
